import React, { useEffect, useState } from 'react'
import { Flex, Input, message, Button, Image } from 'antd';
import { useNavigate } from 'react-router-dom'

import { CheckShieldOutline, UserOutline, UnlockOutline } from 'antd-mobile-icons'
import styles from './index.module.css'

import { jumpTo } from '../../jump'
import { setCache } from '../../utils/cache'

function Login() {
    //导航
    const navigate = useNavigate()

    const [messageApi, contextHolder] = message.useMessage();
    const [userName, setUserName] = useState('')
    const [userPwd, setUserPwd] = useState('')
    const [captcha, seCaptcha] = useState("")
    const [isLoadState, seLoadState] = useState(false)
    //验证码
    const [img, setImg] = useState("")

    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);
    function onChangeUserName(val) {
        let userName = val.target.value
        setUserName(userName);
    }

    function onChangeUserPwd(val) {
        let userPwd = val.target.value
        setUserPwd(userPwd);
    }

    function onCaptcha(val) {
        let captcha = val.target.value
        seCaptcha(captcha);
    }

    function clickCaptcha() {
    }

    function clickLogin() {

        // jumpTo(navigate, '/testLoad', true, null)
        // navigate('/main/board', { replace: true })
        //保存token
        setCache('my_token', '123sfaasdf')
        jumpTo(navigate, '/main', true, { tag: '1' })
    }


    return (<Flex style={{ 'height': '80vh' }} justify='center' align='center'>
        {contextHolder}
        <div style={{ 'width': '350px' }}>
            <Input style={{ '--font-size': '18px' }} value={userName} onChange={onChangeUserName} maxLength='10'
                placeholder='请输入账号...' allowClear={true} prefix={<UserOutline />} size="large" />
            <Input style={{ 'marginTop': '15px', '--font-size': '18px' }} value={userPwd} onChange={onChangeUserPwd}
                type={'password'} maxLength='20' allowClear={true} placeholder='请输入密码...' prefix={<UnlockOutline />} size="large" />
            <Flex style={{ 'width': '350px', 'marginTop': '15px' }} justify={'flex-start'} align={'center'}>
                <Input allowClear={true} maxLength='6' prefix={<CheckShieldOutline />} value={captcha} size="large"
                    onChange={onCaptcha} style={{ 'marginRight': '10px', '--font-size': '18px' }} type={'number'} placeholder='请输入验证码...' />
                <Image preview={false} onClick={clickCaptcha} src={img} width={160} height={60} fit='contain' />
            </Flex>
            <Button loading={isLoadState} className={styles.login_button} onClick={clickLogin} type="primary" size={'large'}>点击登陆</Button>
        </div>
    </Flex>)
}

export default Login;
